<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
</body>
</html>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>

<script type="text/javascript" src="/js/rpc.js"></script>
<script type="text/javascript" src="/js/ws.js"></script>

<script type="text/javascript">
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom);
  var option = null;
  var intervalDul=5*1000
  var maxPoint=1000
  var now = new Date();
  var loginKey='';

  $(document).ready(function(){
    jmicro.socket.init(function(){
      getAvgResponseTime();
    });
  });

  function getAvgResponseTime(){
    jmicro.rpc.callRpc('cn.jmicro.api.monitor.IServiceMonitorData','serviceMonitorData','0.0.1',
      'subsicribe',['cn.jmicro.example.api.ITestRpcService##testrpc##0.0.1##getPerson##cn.jmicro.api.Person'],
      function(rst){
        console.log(rst);
        if(ydata.length ==maxPoint) {
          ydata.shift()
          xdata.shift()
        }
        rst = JSON.parse(rst);
        var label = new Date(rst.time).format('hh:mm:ss');
        ydata.push(rst.avgResponseTime);
        xdata.push(label);
        option.xAxis[0].data = xdata;
        option.series[0].data = ydata
        myChart.setOption(option);

      },true)
      .then(function(rst){
        console.log(rst);
      }).catch(function(err){
      console.log(err);
    });
  }

  var ydata = [];
  var xdata = []

  option = {
    title: {
      text: '服务平均响应时间'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return params[0].value;
      },
      axisPointer: {
        animation: false
      }
    },
    xAxis: [{
      type: 'category',
      splitLine: {
        show: false
      }
    }],
    yAxis: [{
      type: 'value',
      boundaryGap: [0, '100%'],
      splitLine: {
        show: false
      }
    }],
    series: [{
      name: '模拟数据',
      type: 'line',
      showSymbol: true,
      hoverAnimation: true,
      data: ydata
    }]
  };

  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
</script>
